<template>
	<view>
		<view v-for="(item, index) in datalist" style="margin: 10rpx;">
			<cardViewText :imgindex="index" :images="image" :title="item.title" :isTop="item.isTop" :author="item.author"
				:comments="item.comments" :time="item.time" :mode="item.mode" @click="onCustomViewClick(index)">
				<template v-slot:tips>
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索：</text>
						<view class="borderbox"><text>今日金价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</cardViewText>
		</view>
	</view>
</template>

<script>
	import data from "../../../data/news.json"
	import cardViewText from '../../../components/cardViewText.vue'
	export default {
		components: {
			cardViewText
		},
		mounted(){
			const da =data.contentList;
			console.log("组件挂载"+JSON.stringify(da));
		},
		data() {
			return {
				image: [
					'/static/news1.png',
					'/static/news2.PNG',
					'/static/news5.PNG',
					'/static/news3.PNG',
					'/static/news4.PNG'
				],
				datalist: [{
						nId: "T15627",
						title: "Faker夺冠采访火了！认可Uzi实力，为LPL历史最佳，GUMA表明身份",
						isTop: true,
						author: "一点资讯",
						comments: 56,
						time: "2025.10.07",
						showSearch: false,
						mode: 1
					},
					{
						nId: "B4485",
						title: "荣耀400系列全球发货量突破600万台 中端市场的黑马",
						isTop: false,
						author: "人民日报",
						comments: 1025,
						time: "2025.10.25",
						showSearch: false,
						mode: 2
					},
					{
						nId: "B5956",
						title: "黄金还能走多远？卖方高呼“第三浪启动”，230多份研报看多", // 修正“炎报”为“研报”
						isTop: false,
						author: "新华社",
						comments: 452,
						time: "2025.10.28",
						showSearch: true,
						mode: 2
					},
					{
						nId: "B5954",
						title: "好品中国｜金柚出岭南，“丰”景照客都",
						isTop: false,
						author: "央视网",
						comments: 152200,
						time: "2025.10.28",
						showSearch: false,
						mode: 2
					},
					{
						nId: "S45895",
						title: "浙江丽水：千年龙泉剑 匠心传薪火",
						isTop: false,
						author: "人民日报",
						comments: 59874,
						time: "2025.10.27",
						showSearch: false,
						mode: 2
					}
				]
			}
		},
		methods: {
			onCustomViewClick(index) {
				console.log('点击了第', index, '项');
			}
		}
	}
</script>

<style>
	.slotcontent {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		gap: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		margin-top: 10rpx;
	}

	.borderbox {
		border: 1px solid #d0e3ff;
		border-radius: 12rpx;
		padding: 10rpx 20rpx;
		background: linear-gradient(135deg, #f0f7ff, #e1eeff);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.borderbox text {
		font-size: 24rpx;
		color: #1890ff;
		font-weight: 500;
	}
</style>